<template>
  <div class="mv">
	    <div class="mv-center" v-for="(item,index) in mvsList" :key="index">
	       <el-image :src="item.imgurl"></el-image>
	       <div class="mv-center-icon">
	     	  <i class="iconfont icon-shipin"></i>
	     	  <span>{{item.playCount | formatNumber}}</span>
	       </div>
	       <div class="mv-center-play">
	     	  <i class="iconfont icon-icon_play"></i>
	       </div>  
			<div style="font-size: 14px;">{{item.name}}</div>
	    </div> 
  </div>
</template>
<script>

export default {
  name:'Mv',
  props:['mvsList'],
  data(){
    return{
	   
    }
  },
  created(){
  },
  methods:{
     
  },
  filters:{
	  formatDate(time){
		  if(time=== null) {
			  return '无'
		  }else {
			  let date = new Date(time);
			  return formatDate(date, "yyyy-MM-dd hh:mm:ss");
	  }
	 },
	 formatNumber(val){
		let num = Number(val);
		if (num == 0) {
			return num + '';
		} else
		if (num > 1 && num < 10000) {
			return num + '';
		} else {
			return (num / 10000).toFixed(0) + '万';
		}
	 }
  }
}
</script>

<style lang="less" scoped>
	.mv{
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
	}
	.mv-center{
		position: relative;
		height: 160px;
		width: 160px;
		margin: 10px;
		.el-image{
			border-radius: 4px;
		}
		.mv-center-icon{
			position: absolute;
			top: 0;
			right: 4px;
			color: #FFFFFF;
		}
		.mv-center-play{
			position: absolute;
			top: 45px;
			right: 70px;
			color: red;
			display: none;
		}
	}
	.mv-center:hover .mv-center-play{
		display: block;
	}
</style>
